<template>
<view class="page"> 
	<template v-if="isLogin">
		<!-- 单位列表 -->
		<template v-if="type==1">
			<view class="h45">
				<view class="fix-wrap"> 
					<view class="h45 search-bar">
						<view class="search-form">
							<view class="icon sc-icon iconfont">&#xe61e;</view>
							<input type="text" v-model="params.keywrod" class="sc-inp" placeholder="请输入关键词" @input="search">
							<view v-if="params.keywrod" class="icon clear-btn iconfont icon-shanchu"></view>
						</view> 				
					</view> 
				</view>
			</view>
			<view class="body">
				<view class="list-wrap">
					
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					
					<template v-else>
						<template v-if="list.length>0"> 			 
							<view class="item" v-for="(item,index) in list" :key="index">
								<!-- <view class="icon">生物</view> -->
								<view class="info">
									<view class="name">{{item.realname}}</view>
									<view class="params"> 
										<view class="text">{{item.replace_phone}}</view> 
									</view>
								</view>
							</view>
							
							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>
						
					</template>
					 
					
				</view>
			</view>  
			
			<view class="footer">
				<view class="fix-wrap bottom">
					<navigator open-type="navigate" url="/package_yaoji/companyList/companyList?type=2" hover-class="none" class="form-lay-btn">添加单位</navigator>
				</view>
			</view>
		</template>
		
		<!-- 添加单位 -->
		<template v-if="type==2">
			
			<view class="body">
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">单位名称：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.name" placeholder="输入单位名称" />
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">联系方式：</view>
						<view class="form-input">
							<view class="content">
								<input type="number" class="inp" v-model="params.phone" placeholder="输入联系手机" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">单位地址：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.address" placeholder="单位单位地址"/>
								<view class="icon">
									<view class="iconfont f-s44 f-blue">&#xe648;</view>
								</view>
							</view>
						</view>
					</view> 
			
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="form-lay-btn" @click="addCompany">确定添加</view>
				</view>
			</view>
			
			<!-- 选择区域 -->
			<view v-if="flag.isFullPage" class="full-fix-page">
				<template v-if="flag.isShowArea"> 
					<view class="picker-bottom-wrap a-fadeinB"> 
						<view class="hd">
							<view class="cancle" @click="showPopup('hide')">取消</view>
							<view class="confirm f-blue">确定</view>
						</view>
						<picker-view indicator-style="indicatorClass" class="picker-view-wrap row-3">
							<picker-view-column class="item-column">
								<view class="item" v-for="(item,index) in area.provinces" :key="index">{{item.name}}</view>
							</picker-view-column>
							<picker-view-column v-if="false" class="item-column">
								<view class="item" v-for="(item,index) in area.citys" :key="index">{{item.name}}</view>
							</picker-view-column>	
							<picker-view-column v-if="false" class="item-column">
								<view class="item" v-for="(item,index) in area.districts" :key="index">{{item.name}}</view>
							</picker-view-column>
						</picker-view> 						 
					</view>
				</template>					
			</view>
			
		</template>
	</template>
	
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {replaceStr,checkPhone} from '@/common/util.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				compelted:false
			},
			type:1,
			page:1,
			list:[],
			total:0,
			isStop:true,
			params:{
				name:'',
				phone:'',
				area:'',
				address:'',
				keywrod:''
			},
			area:{
				provinces:[],
				citys:[],
				districts:[]
			},
			flag:{
				isFullPage:false,
				isShowArea:false
			}
			
		}
	},
	onShow() {
		
	},
	async onLoad(params) { 
		this.type=params.type;
		this.isLogin = await this.$loginState('check');
		if(this.type==1){
			uni.setNavigationBarTitle({
				title:"单位列表"
			})
		}else if(this.type==2){
			uni.setNavigationBarTitle({
				title:"添加单位"
			})
		}
		if (this.isLogin) { 
			if(this.type==1){
				this.getMembers();
			}else if(this.type==2){
				 
			}
		}
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++;
				if(this.type==1){
					this.getMembers();					
				} 
			} 
		}	 
	},
	methods:{
		// 获取单位列表
		getMembers:async function(){
			let res=await this.$api.ycj_api.getMembers({
				page: this.page,
				types: '1,2,3,4,5,6,7,9,10',
				is_app:1
			})  
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				res.data.data.list.forEach(item=>{
					item.replace_phone=replaceStr(item.phone,3,'****');
				})
				this.list=this.list.concat(res.data.data.list); 
				if(this.list.length>=this.total){
					this.loadingState.default=false;
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}
		},
		
		search:async function(e){
			let res =await this.$api.ycj_api.searchCompany({
				types: '1,2,3,4,5,6,7,9,10',
				limit: 1000,
				name: this.params.keyword
			}) 
			if(res.data.ret==0){ 
				
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				res.data.data.list.forEach(item=>{
					item.replace_phone=replaceStr(item.phone,3,'****');
				})
			}
		},
		
		/*****************获取地区列表******************/
		 
		addCompany:async function(){
			let _this=this;
			if(this.params.name==''){
				uni.showToast({
					icon: 'none', 
					title: '请输入单位名称',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.phone==''||!checkPhone(this.params.phone)){
				uni.showToast({
					icon: 'none', 
					title: '联系手机为空或格式错误',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.address==''){
				uni.showToast({
					icon: 'none', 
					title: '请输入单位地址',
					mask: true,
					duration: 2000
				})
				return
			}
			uni.showLoading({
				title:"数据提交中"
			})
			
			if(this.isStop){
				this.isStop=false;
				let res=await this.$api.ycj_api.addCompany({
					name: this.params.name,
					phone: this.params.phone,
					address: this.params.address
				}) 
				if(res.data.ret==0){
					uni.hideLoading();
					this.$store.commit('UPDATE_COMPANY_LIST',true);   // 公司列表更新
					uni.showToast({
						icon: 'success', 
						title: '添加成功',
						mask: true,
						duration: 2000,
						success() {
							setTimeout(()=>{								
								uni.navigateBack({
									delta:1
								})
								_this.isStop=true; 
							},2000)
						}
					})
					
					
					
				}else{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						image:'../../static/image/error.png',
						title: res.data.message,
						mask: true,
						duration: 2000,
						success() {
							setTimeout(()=>{
								_this.isStop=true; 
							},2000)
						}
					})
				}
				
			}
			
		}
	},
	computed:{
		company_list_update(){
			return this.$store.state.companyListUpdate;
		}
	},
	watch:{
		company_list_update(newer,older){
			if(newer!=older){
				this.list=[];
				this.page=1;
				this.loadingState.default=true;
				this.loadingState.loading=false;
				this.loadingState.completed=false;
				this.getMembers();
			}
		}
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.list-wrap{
		.item{ 
			display: flex;
			padding:20rpx 30rpx;
			margin-top: 20rpx;
			background:#fff;
			.icon{
				width:100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				background: #FF5754; 
				border-radius: 50%;
				font-size: 40rpx;
				text-align: center;
				line-height: 100rpx;
				color:#fff;
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:30rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
		}
	}
	
	/deep/ .indicatorClass{
		height: 50px;	
		line-height: 50px;
	}
	
	.add-yj-btn{ 
		width: 96%;
		height:80rpx;
		margin:10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height:80rpx;
		color:#fff;
		font-size:32rpx;
	}
</style>
